<template>
	<view class="content">
		<image class="home_img" src="../../static/home.png"></image>
		<view class="home_top">
			<view class="home_btn">
				<view class="text">精选好客</view>
			</view>
			<view class="home_type">
				<view style="margin-right: 5px;">
					<van-icon name="guide-o"  color="#ff0000"/>
				</view>
				<view style="margin-top: -5px;" @click="toCourse">全部课程</view>
			</view>
		</view>
		<view class="home_list"  >
			<product-list :proList="productData"></product-list>
		</view>
		
	</view>
</template>

<script>
	import productList from '../../components/productList/productList.vue'
	
	import { ref,onMounted, reactive  } from 'vue'
	export default {
		components:{productList},
		setup(){
			const productData = ref([])
			
			onMounted (()=>{
				let data = []
				for(let i=0;i<10;i++){
					productData.value.push({
						id:i,
						title:`减压增肌训练${i + 1 }号`,
						content:'K3有基础 30min',
						amount: i + '人在训练',
						type:'健身官方课程',
						desc:'持续打卡·有奖品运动'
					})
				}
			})
			
			const toCourse = () =>{
				uni.switchTab({
					url: '/pages/product/index'
				});
			}
		
			
			return{
				productData,
				toCourse
			}
			
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		
		.home_img{
			height: 492px;
			width: 100%;
		}
		.home_top{
			display: flex;
			justify-content: space-between;
			padding: 20px;
			height: 30px;
			.home_btn{
				display: flex;
				background-color: #2E65E9;
				height: 30px;
				align-items: center;
				.text{
					color: #ffffff;
					margin: 0 20px;
					font-size: 18px;					
				}
			}
			.home_type{
				height: 30px;
				display: flex;
				align-items: center;
				font-size: 18px;					
			}
		}
		.home_list{
			padding: 0 12px;
			padding-bottom: 10px;
		}
	}

</style>
